<template>
  <el-tabs v-model="active">
    <el-tab-pane
        v-for="(value , key) in preview"
        :label="key"
        :name="key"
        :key="key">
      <jcx-code-editor style="width: 100%" :mode="getMode(key)" :height="650"
                       v-model="preview[key]"></jcx-code-editor>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="js">
import {onMounted, ref} from "vue";

const props = defineProps({
  preview: {
    type: Object,
    default: {}
  },
  activeName: {
    type: String,
    default: 'JAVA_ACTION'
  }
})

const active = ref(props.activeName);

const getMode = (key) => {
  switch (key) {
    case "JAVA_ACTION":
    case "JAVA_ENTITY_ADD_DTO":
    case "JAVA_ENTITY_BO":
    case "JAVA_ENTITY_EDIT_DTO":
    case "JAVA_ENTITY_PO":
    case "JAVA_ENTITY_QUERY_DTO":
    case "JAVA_ENTITY_VO":
    case "JAVA_MAPPER":
    case "JAVA_SERVICE":
    case "JAVA_SERVICE_IMPL":
      return "text/x-java";
    case "JS_API":
      return "javascript";
    case "SQL_INSERT_MENU":
      return "sql";
    case "XML_MAPPER":
      return "xml";
    case "Vue":
      return "vue";
    default:
      return "javascript";
  }
}

onMounted(() => {

});
</script>
